<template>
  <view class="application-warp">
    <scroll-view scroll-y="true" @scrolltolower="loadMore()" class="scroll_view">
      <view class="applications_scroll_content">
        <view class="application-item" v-for="(item,index) in list" :key="index+'applist'" @click="backMain(index)">
          <view class="app_name">{{item.budgetName}}</view>
          <p class='msg'>
            <view class="left">出差时间</view>
            <view class="right">{{formatData(item.itineraryStartDate)}}至{{formatData(item.itineraryEndDate)}}</view>
          </p>
          <p class='msg'>
            <view class="left">出差行程</view>
            <view class="right">{{item.originName}}-{{item.destinationName}}</view>
          </p>
          <p class='msg'>
            <view class="left">出差人员</view>
            <view class="right">{{item.staffs}}</view>
          </p>
          <p>
            <view class="left">{{item.applicationId}}</view>
            <view class="right">{{formatApplicationDate(item.applicationDate)}}</view>
          </p>
        </view>
        <view class="application_load_more" v-if="showBottom">
          <view class="load_more icon-yanzhengzhong" v-if="showLoadMore">
            <view class="loading">
              &#xe629;
            </view>
            <view class="loading_text">
              加载中...
            </view>
          </view>
          <view class="no_more" v-else>
            没有更多了~
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getTravelApplyList } from "@/api/hotel.js";
import moment from "moment";
export default {
  data() {
    return { list: [], page: 1, showBottom: false, showLoadMore: false };
  },
  created() {
    this.page = 1;
    this.getList();
    moment.locale("zh-cn"); //
  },
  methods: {
    loadMore() {
      console.log("loadMore");
      if (this.showBottom && this.showLoadMore) {
        this.page += 1;
        this.getList();
      }
    },
    onPullDownRefresh() {
      this.page = 1;
      this.getList();
    },
    async getList() {
      const res = await getTravelApplyList(this.page);
      if (res[1].respCode === "FJKBP0000" && res[1].respCode !== null) {
        // uni.stopPullDownRefresh();
        if (this.page == 1) {
          this.list = [];
        }
        const result = res[1].data;
        result.records.forEach((item) => {
          let staffs = item.travelApp.internalStaffResult;
          let str = "";
          for (let index = 0; index < staffs.length; index++) {
            const element = staffs[index];
            if (index != staffs.length - 1) {
              str += element.staffName + "、";
            } else {
              str += element.staffName;
            }
          }
          item.travelApp.staffs = str;
          this.list.push(item.travelApp);
          //没有数据
          if (!this.list || this.list.length == 0) {
            this.showBottom = false;
          } else {
            this.showBottom = true;
          }
          if (result.current >= result.pages) {
            this.showLoadMore = false;
          } else {
            this.showLoadMore = true;
          }
        });
      }
    },
    formatData(data) {
      return moment(data, "YYYYMMDD").format("yyyy-MM-DD");
    },
    formatApplicationDate(data) {
      if (data.length == 8) {
        return moment(data, "YYYYMMDD").format("MM-DD");
      } else {
        return moment(data, "YYYYMMDD").format("MM-DD HH:mm:ss");
      }
    },
    backMain(index) {
      let item = this.list[index];
      console.log(item);
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];
      prevPage.$vm.application = {
        applicationName: item.budgetName,
        detinationResult: [{ placeName: item.destinationName }],
        originResult: [{ placeName: item.originName }],
        applicationDate:
          this.formatData(item.itineraryStartDate) +
          "至" +
          this.formatData(item.itineraryEndDate),
        checkInDate: this.formatData(item.itineraryStartDate),
        checkOutDate: this.formatData(item.itineraryEndDate),
        applicationId: item.applicationId,
        data: item,
      };
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss">
@import "../../static/css/mixin.scss"; 
.application_load_more {
  height: 44rpx;
  align-items: center;
  justify-content: center;
  display: flex;
}
@keyframes loading_circle {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(36deg);
  }
  20% {
    transform: rotate(72deg);
  }
  30% {
    transform: rotate(108deg);
  }
  40% {
    transform: rotate(144deg);
  }
  50% {
    transform: rotate(180deg);
  }
  60% {
    transform: rotate(216deg);
  }
  70% {
    transform: rotate(252deg);
  }
  80% {
    transform: rotate(288deg);
  }
  90% {
    transform: rotate(324deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.load_more {
  font-family: "iconfont";
  display: flex;
  .loading {
    animation: loading_circle 1.5s ease-in-out infinite;
  }
  .loading_text {
    padding-left: 16rpx;
  }
}
.applications_scroll_content {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.scroll_view {
  height: 100%;
}
.application-warp {
  width: 100%;
  height: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
  overflow: hidden;
  overflow-y: scroll;
  background: #f7f7f7;
  .application-item {
    margin: 30rpx 32rpx 12rpx;
    padding: 0 30rpx;
    background: #fff;
    box-shadow: 0px 10rpx 30rpx 0px rgba(0, 0, 0, 0.08);
    border-radius: 20rpx;
    .app_name {
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
	  @include border_bottom1px();
      margin-bottom: 16rpx;
    }
    .msg {
      display: flex;
      line-height: 66rpx;
      .left {
        display: inline-block;
        width: 140rpx;
      }
      .right {
        flex: 1;
        text-align: right;
      }
    }
    p {
      &:last-child {
        height: 90rpx;
        line-height: 90rpx;
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        color: #666;
		@include border_top1px();
        margin-top: 16rpx;
      }
    }
  }
}
</style>

